﻿ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

	
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
		
		<title>Using DataTable with column filter plugin - Customize Filters</title>
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
			@import "media/css/themes/base/jquery-ui.css";
			@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
		</style>

        <script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.js" type="text/javascript"></script>

        <script src="media/js/jquery-ui.js" type="text/javascript"></script>

        <script src="media/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>

		<script type="text/javascript">
$(document).ready(function(){
                $.datepicker.regional[""].dateFormat = 'dd/mm/yy';
                $.datepicker.setDefaults($.datepicker.regional['']);
     $('#example').dataTable({
		"aoColumns": [ 
			{ "sWidth": "200px" },
			null,
			null
		]
	} )
		  .columnFilter({ sPlaceHolder: "head:before",
		  sRangeFormat: "{to} ot {from} mroF",
			aoColumns: [ { type: "text" },
				     { type: "date-range" },
                                     { type: "date-range"  }
				]

		});
});

		</script>
        <script type="text/javascript">

            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-17838786-4']);
            _gaq.push(['_trackPageview']);

            (function () {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();

</script>
	</head>




<body id="dt_example">
		<div id="container">
			<a href="index.html">Home</a>
			<a href="http://code.google.com/p/jquery-datatables-column-filter/wiki/ColumnFilter">Wiki</a> 
			<div class="full_width big">

				JQuery DataTable Column Filter - Date Range filters
			</div>
			
			<h1>Preamble</h1>
			<p>
				DataTables Column Filter add-on enables you to add date range filters where you can filter columns by start and end dates.
			</p>

			
	
			
			
			<h1>Live example</h1>







			<div id="demo">
 <table id="example" class="display">
                    <thead>
                        <tr>
                            <th style="width:150px">Company name</th>
                            
                            <th style="width:350px">Date Created</th>
                            <th style="width:250px">Date Updated</th>

                        </tr>
                        <tr>
                            <th>Company name</th>
                            
                            <th>Date Created</th>
                            <th>Date Updated</th>
                        </tr>
                    </thead>

                    <tbody> 
                        <tr>
                            <td>Emkay Entertainments</td>
                            
                            <td>28/05/2012</td>
                            <td>25/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>The Empire</td>

                            
                            <td>16/06/2012</td>
                            <td>10/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Asadul Ltd</td>
                            
                            <td>13/07/2012</td>
                            <td>12/09/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Gargamel ltd</td>
                            
                            <td>15/05/2012</td>
                            <td>15/05/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Ashley Mark</td>
                            
                            <td>15/07/2012</td>
                            <td>25/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>MuchMoreMusic Studios</td>
                            
                            <td>02/07/2012</td>

                            <td>24/09/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Victoria Music Ltd</td>
                            
                            <td>21/07/2012</td>
                            <td>19/08/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Abacus Agent</td>
                            
                            <td>08/06/2012</td>
                            <td>23/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Atomic</td>

                            
                            <td>09/06/2012</td>
                            <td>04/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Pyramid Posters</td>
                            
                            <td>30/07/2012</td>
                            <td>14/10/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Kingston Smith Ltd</td>
                            
                            <td>06/08/2012</td>
                            <td>04/09/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Garrett Axford PR</td>
                            
                            <td>06/07/2012</td>
                            <td>28/09/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Derek Boulton Management</td>
                            
                            <td>12/08/2012</td>

                            <td>22/09/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>(TCM)</td>
                            
                            <td></td>
                            <td>15/05/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Billy Russell Management</td>
                            
                            <td>14/08/2012</td>
                            <td>14/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Stage Audio Services</td>

                            
                            <td>22/07/2012</td>
                            <td>15/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Windsong International</td>
                            
                            <td>21/06/2012</td>
                            <td>18/09/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Vivante Music Ltd</td>
                            
                            <td>19/05/2012</td>
                            <td>14/07/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Way to Blue</td>
                            
                            <td>29/07/2012</td>
                            <td>23/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Glasgow City Halls</td>
                            
                            <td>10/07/2012</td>

                            <td>14/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>The List</td>
                            
                            <td>07/07/2012</td>
                            <td>14/09/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Wilkinson Turner King</td>
                            
                            <td>26/07/2012</td>
                            <td>08/09/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>GSC Solicitors</td>

                            
                            <td>03/06/2012</td>
                            <td>24/06/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Vanessa Music Co</td>
                            
                            <td>15/05/2012</td>
                            <td>15/05/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Regent Records</td>
                            
                            <td>05/06/2012</td>
                            <td>25/08/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>BBC Radio Lancashire</td>
                            
                            <td>11/08/2012</td>
                            <td>14/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>The Citadel Arts Centre</td>
                            
                            <td>22/05/2012</td>

                            <td>10/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Villa Audio Ltd</td>
                            
                            <td>07/08/2012</td>
                            <td>12/09/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Astra travel</td>
                            
                            <td>09/06/2012</td>
                            <td>04/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Idle Eyes Printshop</td>

                            
                            <td>20/06/2012</td>
                            <td>06/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Miggins Music (UK)</td>
                            
                            <td>07/06/2012</td>
                            <td>16/06/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Magic 999</td>
                            
                            <td>15/08/2012</td>
                            <td>19/08/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Delga Group</td>
                            
                            <td>03/07/2012</td>
                            <td>04/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Zane Music</td>
                            
                            <td>15/05/2012</td>

                            <td>15/05/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Universal Music</td>
                            
                            <td>05/07/2012</td>
                            <td>06/07/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Gotham Records</td>
                            
                            <td>23/05/2012</td>
                            <td>27/05/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Timbuktu Music Ltd</td>

                            
                            <td>31/07/2012</td>
                            <td>09/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Online Music</td>
                            
                            <td>18/07/2012</td>
                            <td>03/08/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Irish Music Magazine</td>
                            
                            <td>29/07/2012</td>
                            <td>23/08/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Savoy Records</td>
                            
                            <td>31/05/2012</td>
                            <td>06/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Temple Studios</td>
                            
                            <td>16/08/2012</td>

                            <td>04/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Gravity Shack Studio</td>
                            
                            <td>27/05/2012</td>
                            <td>30/07/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Dovehouse Records</td>
                            
                            <td>02/08/2012</td>
                            <td>22/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Citysounds Ltd</td>

                            
                            <td>15/05/2012</td>
                            <td>15/05/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Revolver Music Publishing</td>
                            
                            <td>04/08/2012</td>
                            <td>25/08/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Jug Of Ale</td>
                            
                            <td>12/06/2012</td>
                            <td>26/07/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Isles FM 103</td>
                            
                            <td>01/07/2012</td>
                            <td>08/09/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Headscope</td>
                            
                            <td>28/06/2012</td>

                            <td>02/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Universal Music Ireland</td>
                            
                            <td>09/06/2012</td>
                            <td>04/07/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Zander Exports</td>
                            
                            <td>19/08/2012</td>
                            <td>14/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Midem (UK)</td>

                            
                            <td>17/07/2012</td>
                            <td>14/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>La Rocka Studios</td>
                            
                            <td>16/06/2012</td>
                            <td>10/07/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Warner Home DVD</td>
                            
                            <td>24/05/2012</td>
                            <td>24/07/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Music Room</td>
                            
                            <td>15/05/2012</td>
                            <td>15/05/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Blue Planet</td>
                            
                            <td>26/05/2012</td>

                            <td>06/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Dream 107.7FM</td>
                            
                            <td>02/07/2012</td>
                            <td>24/09/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Moneypenny Agency</td>
                            
                            <td>01/06/2012</td>
                            <td>30/06/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Artsun</td>

                            
                            <td>08/06/2012</td>
                            <td>23/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Clyde 2</td>
                            
                            <td>29/07/2012</td>
                            <td>23/08/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>9PR</td>
                            
                            <td>30/07/2012</td>
                            <td>14/10/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>River Studio&#39;s</td>
                            
                            <td>17/06/2012</td>
                            <td>16/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Start Entertainments Ltd</td>

                            
                            <td>06/07/2012</td>
                            <td>28/09/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Vinyl Tap Mail Order Music</td>
                            
                            <td>23/06/2012</td>
                            <td>03/08/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Passion Music</td>
                            
                            <td>15/05/2012</td>
                            <td>15/05/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>SuperVision Management</td>
                            
                            <td>25/06/2012</td>
                            <td>25/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Lite FM</td>
                            
                            <td>22/07/2012</td>

                            <td>15/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>ISIS Duplicating Company</td>
                            
                            <td>10/08/2012</td>
                            <td>07/11/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Vanderbeek &amp; Imrie Ltd</td>
                            
                            <td>19/05/2012</td>
                            <td>14/07/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Glamorgan University</td>
                            
                            <td>09/06/2012</td>
                            <td>04/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Web User</td>
                            
                            <td>10/07/2012</td>

                            <td>14/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Farnborough Recreation Centre</td>
                            
                            <td>18/05/2012</td>
                            <td>26/07/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Robert Owens</td>
                            
                            <td>26/07/2012</td>
                            <td>08/09/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Magick Eye Records</td>

                            
                            <td>23/07/2012</td>
                            <td>13/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Alexandra Theatre</td>
                            
                            <td>15/05/2012</td>
                            <td>15/05/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Keda Records</td>
                            
                            <td>25/07/2012</td>
                            <td>14/10/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Independiente Ltd</td>
                            
                            <td>11/08/2012</td>
                            <td>14/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Shurwood Management</td>
                            
                            <td>11/07/2012</td>

                            <td>29/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Fury Records</td>
                            
                            <td>07/08/2012</td>
                            <td>12/09/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Northumbria University</td>
                            
                            <td>29/07/2012</td>
                            <td>23/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Pop Muzik</td>

                            
                            <td>20/06/2012</td>
                            <td>06/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Jonsongs Music</td>
                            
                            <td>27/07/2012</td>
                            <td>05/08/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>Hermana PR</td>
                            
                            <td>15/08/2012</td>
                            <td>19/08/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Sugarcane Music</td>
                            
                            <td>22/08/2012</td>
                            <td>23/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>JFM Records</td>
                            
                            <td>15/05/2012</td>

                            <td>15/05/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Black Market Records</td>
                            
                            <td>16/05/2012</td>
                            <td>17/05/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Float Your Boat Productions</td>
                            
                            <td>23/05/2012</td>
                            <td>27/05/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Creation Management</td>

                            
                            <td>11/06/2012</td>
                            <td>20/06/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Bryter Music</td>
                            
                            <td>18/07/2012</td>
                            <td>03/08/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>The Headline Agency</td>
                            
                            <td>09/06/2012</td>
                            <td>04/07/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>MP Promotions</td>
                            
                            <td>31/05/2012</td>
                            <td>06/07/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Modo Production Ltd</td>
                            
                            <td>27/06/2012</td>

                            <td>15/08/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Nomadic Music</td>
                            
                            <td>27/05/2012</td>
                            <td>30/07/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Reverb Records Ltd</td>
                            
                            <td>13/06/2012</td>
                            <td>02/09/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>SIBC</td>

                            
                            <td>15/05/2012</td>
                            <td>15/05/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Marken Time Critical Express</td>
                            
                            <td>15/06/2012</td>
                            <td>06/07/2012 00:00:00</td>

                        </tr>
                        <tr>
                            <td>102.2 Smooth FM</td>
                            
                            <td>12/06/2012</td>
                            <td>26/07/2012 00:00:00</td>
                        </tr>
                        <tr>

                            <td>Chesterfield Arts Centre</td>
                            
                            <td>20/08/2012</td>
                            <td>28/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>The National Indoor Arena</td>
                            
                            <td>28/06/2012</td>

                            <td>02/10/2012 00:00:00</td>
                        </tr>
                        <tr>
                            <td>Salisbury City Hall</td>
                            
                            <td>29/07/2012</td>
                            <td>23/08/2012 00:00:00</td>
                        </tr>

                        <tr>
                            <td>Minder Music</td>
                            
                            <td>19/08/2012</td>
                            <td>14/10/2012 00:00:00</td>
                        </tr>
                    </tbody>
                    <tfoot>

                        <tr>
                            <th>Company name</th>
                          
                            <th>Date Created</th>
                            <th>Date Updated</th>
                        </tr>
                    </tfoot>
                </table>


			</div>
			<div class="spacer"></div>

			
			

			
			<h1>Initialization code</h1>
			<p>In the initialization code you should place "date-range" as type of the column filter as shown below:</p>
			<pre>		
$(document).ready(function(){
     $('#example').dataTable()
		  .columnFilter({ 	sPlaceHolder: "head:before",
					aoColumns: [ 	{ type: "text" },
				    	 		{ type: "date-range" },
                                    			{ type: "date-range" }
						]

		});
});
	</pre>
<p>In this example is also placed filters before header row using the sPlaceHolder parameter. In this case you will need to add duplicate heading row after the first heading row in the THEAD tag. In this row will be injected filter controls and it will ba placed before heading row that is used by DataTables.</p>
		<p>Note that date format of the cells must match the date format of the calendar. Filter uses Jquery Date picker UI regional setting and you can change this in the following code:</p>
<pre>
                $.datepicker.regional[""].dateFormat = 'dd/mm/yy';
                $.datepicker.setDefaults($.datepicker.regional['']);
</pre>


			<h1>Other examples</h1>
			<ul>

				<li><a href="default.html">Basic usage</a></li>
				<li><a href="customFilters.html">Custom filters</a></li>
				<li><a href="dateRange.html">Date ranges</a></li>
				<li><a href="numberRange.html">Number ranges</a></li>
				<li><a href="ajaxSource.html">Ajax source filtering</a></li>
				<li><a href="serverSide.html">Server-side filtering</a></li>
                		<li><a href="regex.html">Regular expression filtering</a></li>
		        	<li><a href="external.html">Filtering via external form</a></li>
			</ul>
			
			<div id="footer" style="text-align:center;">
				<span style="font-size:10px;">
					DataTables Column Filter Add-on &copy; Jovan Popovic 2012.<br>
					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2012<br>
				</span>
			</div>
		</div>
	</body>





</html>